/* ==================
        初始化
 ==================== */

body {
	background-color: #f1f1f1;
	font-size: 28rpx;
	color: #333333;
	font-family: Helvetica Neue, Helvetica, sans-serif;
}

view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
	box-sizing: border-box;
}

view::-webkit-scrollbar{
	display: none;/* 不显示滚动条 */
}

uni-input {
	font-size: 1em;
}

.topPlace {
	width: 100%;
	height: var(--status-bar-height);
	background: transparent;
}
.pageTit{
	height: var(--window-top);
}
/* 外边距 */
.mauto-x{margin: 0 auto;}
// 定义内外边距，历遍1-500
@for $i from 0 through 500 {
	// 只要双数和能被5除尽的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		// 得出：u-margin-30或者u-m-30
		.u-margin-#{$i}, .m#{$i}r,.u-m-#{$i} {
			margin: $i + rpx;
		}
		
		// 得出：u-padding-30或者u-p-30
		.u-padding-#{$i}, .p#{$i}r,.u-p-#{$i}{
			padding: $i + rpx;
		}
		
		@each $short, $long in l left, t top, r right, b bottom {
			// 缩写版，结果如： u-m-l-30
			// 定义外边距
			.m#{$short}#{$i}r {
				margin-#{$long}: $i + rpx;
			}
			
			// 定义内边距
			.p#{$short}#{$i}r {
				padding-#{$long}: $i + rpx;
			}
			
			
			.m#{$short}#{$i} {
				margin-#{$long}: $i + rpx;
			}
			
			// 定义内边距
			.p#{$short}#{$i} {
				padding-#{$long}: $i + rpx;
			}
		}
	}
}

.p0 {padding:0;}
.pl0 {padding-left:0;}
.pr0 {padding-right:0;}
.pt0 {padding-top:0;}
.pb0 {padding-bottom:0;}
/* 宽 */

// 定义width
@for $i from 1 through 1000 {
	.w#{$i}r {
		width: $i+ rpx;
	}
	// 定义height
	.h#{$i}r {
		height: $i+ rpx;
	}
	/* border-radius等分 */
	.bor-rad#{$i}r {
		border-radius: $i+ rpx;
	}
	
	/* border-radius等分 */
	.bor-rad#{$i} {
		border-radius: $i+ rpx;
	}
}
.bor-rad-t0{border-top-left-radius: 0 ;border-top-right-radius: 0;}
.bor-rad-b0{border-bottom-left-radius: 0 ;border-bottom-right-radius: 0;}
.bor-rad-l0{border-top-left-radius: 0 ;border-bottom-left-radius: 0;}
.bor-rad-r0{border-top-right-radius: 0;border-bottom-right-radius: 0;}


.w0{width: 0%;}
.w10{width: 10%;}
.w20{width: 20%;}
.w25{width: 25%;}
.w30{width: 30%;}
.w33{width: 33%;}
.w40{width: 40%;}
.w50{width: 50%;}
.w60{width: 60%;}
.w70{width: 70%;}
.w75{width: 75%;}
.w80{width: 80%;}
.w90{width: 90%;}
.w100{width: 100%;}

/* 高 */
.h0{height: 0%;}
.h10{height: 10%;}
.h20{height: 20%;}
.h30{height: 30%;}
.h33{height: 33%;}
.h40{height: 40%;}
.h50{height: 50%;}
.h60{height: 60%;}
.h70{height: 70%;}
.h75{height: 75%;}
.h80{height: 80%;}
.h90{height: 90%;}
.h100{height: 100%;}
/* 边框 */
.bor{border: 1px solid #F7F7F7;}
.bor-l{border-left: 1px solid #F7F7F7;}
.bor-r{border-right: 1px solid #F7F7F7;}
.bor-t{border-top: 1px solid #F7F7F7;}
.bor-b{border-bottom: 1px solid #F7F7F7;}

.bor-zs{border: 1px solid $zhuse;}
.bor-zs-l{border-left: 1px solid $zhuse;}
.bor-zs-r{border-right: 1px solid $zhuse;}
.bor-zs-t{border-top: 1px solid $zhuse;}
.bor-zs-b{border-bottom: 1px solid $zhuse;}

.bor-rad50{border-radius: 50%;}

/* flex */
.flex1{flex: 1;}
.flex2{flex: 2;}
.flex3{flex: 3;}
.flex4{flex: 4;}
.flex5{flex: 5;}
.als-s{align-self: stretch;}
/* flex */
/*定位*/
.pr{position: relative;}
.pa{position: absolute;}
.pf{position: fixed}

/* 文字对齐*/
.tl {text-align: left;}
.tc {text-align: center;}
.tr {text-align: right;}
.box-c{text-align: -webkit-center;}
.box-r{text-align: -webkit-right;}
/*浮动与清除浮动*/
.fl {float: left;}
.fr {float: right;}

/*#ifdef H5*/
.fix {zoom: 1;}
.fix:after {display: table;content: '';clear: both;}
/*#endif*/

/*显示*/
.dn {display: none;}
.di {display: inline;}
.db {display: block;}
.dib {display: inline-block;}
.dt {display: table;}
/*#ifdef H5*/
div.dib {display: inline;zoom: 1;}
/*#endif*/
.vm {vertical-align: middle;}
.vib {display: inline-block;vertical-align: middle;}

/*单行文本溢出省略号*/
.one-t {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all linear 0.2s;
}
/*多行文本溢出省略号*/
.more-t {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: all linear 0.2s;
}
.two-t {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: all linear 0.2s;
}
.three-t {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	transition: all linear 0.2s;
}
.nowrap{white-space: nowrap;}//不换行
/* 文本样式 */
.td-n{text-decoration:none }//无装饰，通常对html下划线标签去掉下划线样式
.td-s{text-decoration:blink }//闪烁
.td-c{text-decoration:line-through }//删除线样式-贯穿线样式
.td-b{text-decoration:underline }//下划线样式
.td-t{text-decoration:overline }//上划线样式

/* ==================
          flex布局(colorui里面也有相关基础样式)
 ==================== */
 .u-flex-wrap {flex-wrap: wrap;}
 .u-flex-nowrap {flex-wrap: nowrap; }
 .u-col-center {align-items: center; }
 .u-col-top {align-items: flex-start;}
 .u-col-bottom {align-items: flex-end; }
 .u-row-center {justify-content: center; }
 .u-row-left {justify-content: flex-start;}
 .u-row-right {	justify-content: flex-end; }
 .u-row-between {justify-content: space-between;}
 .u-row-around {justify-content: space-around; }
//flex 布局 剩余占满
.als-s{align-self: stretch;}
/* x水平排列*/
.x-f {	display: flex;flex-direction: row;}
/* x水平排列*/
.x-fc{	display: flex;flex-direction: row;align-items: center;}
/*x两端*/
.x-b{	display: flex;flex-direction: row;justify-content: space-between;}
/*x两端且水平居中*/
.x-bc {	display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
/*x平分且水平居中*/
.x-ac {	display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
/*x水平靠上对齐*/
.x-start {	display: flex;flex-direction: row;align-items: flex-start;}
/*x水平靠下对齐*/
.x-end {	display: flex;flex-direction: row;align-items: flex-end;}
/*上下左右居中*/
.x-c {	display: flex;flex-direction: row;justify-content: center;align-items: center;}
/*y竖直靠左*/
.y-start {display: flex;flex-direction: column;align-items: flex-start;}
/*y竖直靠右*/
.y-end {display: flex;flex-direction: column;align-items: flex-end;}
/*y竖直居中*/
.y-f {display: flex;flex-direction: column;}
/*y竖直居中*/
.y-fc {display: flex;flex-direction: column;align-items: center;}
// y竖直两端
.y-b {display: flex;flex-direction: column;justify-content: space-between;}
/*y竖直两端居中*/
.y-bc {display: flex;flex-direction: column;align-items: center;justify-content: space-between;}
// y竖直两端2
.y-a {display: flex;flex-direction: column;justify-content: space-around;}
// y竖直两端2
.y-ac{display: flex;flex-direction: column;justify-content: space-around;align-items: center;}

/*透明*/
.opa10{opacity: 1;}
.opa9{opacity: .9;}
.opa8{opacity: .8;}
.opa7{opacity: .7;}
.opa6{opacity: .6;}
.opa5{opacity: .5;}
.opa4{opacity: .4;}
.opa3{opacity: .3;}
.opa2{opacity: .2;}
.opa1{opacity: .1;}
.opa0{opacity: 0;}
/*字体*/
@for $i from 9 to 100 {
	.f#{$i}r {
		font-size: $i + rpx;
	}
	.fs#{$i} {
		font-size: $i + rpx;
	}
}

/*字体粗细*/
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-w{font-weight: bold;}
/*字体间距*/
.l-h1{line-height: 1;}
.l-h15{line-height: 1.5;}
.l-h2{line-height: 2;}
.l-h25{line-height: 2.5;}
/*字体颜色*/
.color-000{color: #000000;}
.color-111{color: #111111;}
.color-222{color: #222222;}
.color-333{color: #333333;}
.color-666{color: #666666;}
.color-999{color: #999999;}
.color-aaa{color: #AAAAAA;}
.color-bbb{color: #BBBBBB;}
.color-ccc{color: #CCCCCC;}
.color-ddd{color: #DDDDDD;}
.color-eee{color: #EEEEEE;}
.color-fff{color: #FFFFFF;}
.color-ye{color: yellow;}
.color-or{color: orange;}
.color-zs{color: $zhuse;}
.color-fs{color: $fuse;}





/*背景颜色*/
.bg-000{background-color: #000000;}
.bg-111{background-color: #111111;}
.bg-222{background-color: #222222;}
.bg-333{background-color: #333333;}
.bg-444{background-color: #444444;}
.bg-555{background-color: #555555;}
.bg-666{background-color: #666666;}
.bg-777{background-color: #777777;}
.bg-888{background-color: #888888;}
.bg-999{background-color: #999999;}
.bg-aaa{background-color: #AAAAAA;}
.bg-bbb{background-color: #bbbbbb;}
.bg-ccc{background-color: #CCCCCC;}
.bg-ddd{background-color: #DDDDDD;}
.bg-eee{background-color: #EEEEEE;}
.bg-fff{background-color: #FFFFFF;}
.bg-f7f{background-color: #F7F7F7;}
.bg-f5f{background-color: #F5F5F5;}
.bg-zs{background-color: $zhuse;}
.bg-fs{background-color: $fuse;}


